<script setup>
  import { ref, reactive, watch, onMounted, watchEffect } from 'vue'
  import { useRouter } from 'vue-router';

  import BingTu from '@/common/charts/bing-tu.vue';
  import HuanZhuangTu from '@/common/charts/huan-zhuang-tu.vue';
  import ZhuZhuangTu from '@/common/charts/zhu-zhuang-tu.vue';
  import ZhuZhuangTuX from '@/common/charts/zhu-zhuang-tu-x.vue';
  import ShuangZhuTu from '@/common/charts/shuang-zhu-tu.vue';

  // --------- 3d 图表 ---------
  import HuanZhuangTu3d from '@/common/charts/huan-zhuang-tu-3d.vue';
  import ZhuZhuangTu3d from '@/common/charts/zhu-zhuang-tu-3d.vue';

  const props = defineProps({
    title: '',
    path: '',
    bgi: 'default',
    chartType: '',
    chartData: {},
    isShowUnit: true,
  })

  const emit = defineEmits(['emitChartParams'])

  const router = useRouter()

  function goToPath(path) {
    router.push(path)
  }

  // 向父组件 发送 图表参数
  function emitChartParams(val) {
    emit('emitChartParams', val)
  }
</script>

<template>
  <div class="full" id="Echart" ref="Echart" >
    <div class="w_full text_center text_1 cursor ls_2 jian_bian_text_1 fw_bold" @click="goToPath(props.path)">
      {{ props.title }}
    </div>

    <div class="w_full h_full-15">
      <bing-tu 
        v-if="chartType == '饼图'" 
        :isShowUnit="isShowUnit"
        :value="chartData" 
        @emitChartParams="emitChartParams" 
      />
      <zhu-zhuang-tu 
        v-if="chartType == '柱状图'" 
        :value="chartData" 
        :isShowUnit="isShowUnit"
        @emitChartParams="emitChartParams" 
      />
       <huan-zhuang-tu 
        v-if="chartType == '环状图'" 
        :isShowUnit="isShowUnit"
        :value="chartData" 
        @emitChartParams="emitChartParams" 
      />
      <zhu-zhuang-tu-x 
        v-if="chartType == '柱状图3'" 
        :value="chartData" 
        :isShowUnit="isShowUnit"
        @emitChartParams="emitChartParams" 
      /> 
      <shuang-zhu-tu 
        v-if="chartType == '双柱图'" 
        :value="chartData" 
        :isShowUnit="isShowUnit"
        @emitChartParams="emitChartParams" 
      />

      <huan-zhuang-tu-3d v-if="chartType == '3d-pie'"  />
      <zhu-zhuang-tu-3d v-if="chartType == '3d-bar'"  />
    </div>
  </div>
</template>
